<!-- 模板 -->
<template>
    <div class="pop" v-show="show">
        <transition :name="maskerTransition">
            <div class="pop__masker" v-show="isComponentShow"  @click="onHide"></div>
        </transition>
        <div class="pop__inner">
            <transition :name="dialogTransition" v-on:after-leave="afterLeave">
                <div class="pop__inner__dialog" v-show='isComponentShow'>
                    <article class="jq-code dn" data-wrap>
                        <header class="jq-code-header" data-header>请选择图中的文字完成验证</header>
                        <div class="jq-code-content">
                            <div class="jq-code-img" @click="update">
                                <div class="jq-code-text" v-for="item in questionRandom">{{ item }}</div>
                            </div>
                            <div class="jq-code-change">
                                <span @click="update">看不清点击更换</span>
                            </div>
                            <ul class="jq-code-inputs" data-inputs>
                                <li class="jq-code-input">{{ selectChinese[0] || '' }}</li>
                                <li class="jq-code-input">{{ selectChinese[1] || '' }}</li>
                                <li class="jq-code-input">{{ selectChinese[2] || '' }}</li>
                                <li class="jq-code-btn" @click="deleteSelectChinese">
                                    <i class="aui-icon aui-icon--close"></i>
                                </li>
                            </ul>
                            <ul class="jq-code-ul clearfix" data-list>
                                <li class="jq-code-li" @click="selectChineseEvent(item)" v-for="item in random">{{ item }}</li>                            
                            </ul>
                        </div>
                    </article>
                </div>
            </transition>
        </div>
    </div>
</template>


<!-- js -->
<script>
    export default{
       data(){
            return{
                show: !1,
                isComponentShow: !1,
                maskerTransition: "aui-pop-masker",
                dialogTransition: "aui-pop",
                chinese: ["人", "之", "初", "性", "本", "善", "相", "近", "习", "远", "苟", "不", "教", "乃", "迁", "道", "贵", "以", "专", "昔", "孟", "母", "择", "邻", "处", "子", "学", "断", "机", "杼"],
                selectChinese: [],
                questionRandom: [],
                random: [],
                randomCount: 12,
                randomQuestionCount: 3
            }
        },
        props: {
            isShow: {
                type: Boolean,
                default: !1
            }
        },
        watch: {
            isShow(){
                if(!this.isShow){
                    this.onHide();
                    return;
                }

                this.show = 1;

                setTimeout(() => {
                    this.isComponentShow = !0;
                }, 10);
            },
            selectChinese(){
                if(this.selectChinese.length >= 3){
                    // 判断是否正确
                    setTimeout(() => {
                        if(this.selectChinese.join() === this.questionRandom.join()){
                            this.$emit('on-success');
                            this.onHide();
                        }else{  
                            this.update();
                        }
                    }, 100);
                }
            }
        },
        methods: {
            onHide() {
                this.isComponentShow = !1;
                this.$emit('on-hide');
            },
            // 点击确认按钮之后，可能会存在回调事件
            afterLeave(){
                this.show = !1;
                // 回调
                this.$emit('on-cb');
            },
            update(){
                this.getRandomList();
                this.getQuestionRandom();
                this.selectChinese = [];
            },
            // 随机产生一组文字
            getRandomList(){
                this.random = [];
                this.getListChinese(this.chinese, this.random, this.randomCount);
            },
            // 从随机产生的数组中产生三个随机数
            getQuestionRandom(){
                this.questionRandom = [];
                this.getListChinese(this.random, this.questionRandom, this.randomQuestionCount);

            },
            // 获取一组文字
            getListChinese(from, to, count){
                for(let i = 0; i < count; i ++){
                    let randomIndex = Math.floor(Math.random() * from.length);
                    let flag = true;
                    for(let j = 0; j < to.length; j ++){
                        if(to[j] === from[randomIndex]){
                            flag = false;
                            i --;
                            break;
                        }
                    }

                    if(flag){
                        to.push(from[randomIndex]);
                    }
                }

                return to;
            },
            selectChineseEvent(item){
                this.selectChinese.push(item);
            },
            deleteSelectChinese(){
                this.selectChinese.pop();
            }
        },
        created(){
            this.getRandomList();
            this.getQuestionRandom();
        }
    }
</script>

<!-- scss -->
<style lang="scss">
@import "../../styles/views/pop.scss";
.pop{
    position: fixed;
}
.pop__inner__dialog{
    .jq-code {
        width: 260px;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
    }
    .jq-code-header {
        background: #114384;
        color: #fff;
        height: 43px;
        display: box;
        display: -webkit-box;
        box-align: center;
        -webkit-box-align: center;
        box-pack: center;
        -webkit-box-pack: center;
        font-size: 15px;
    }
    .jq-code-content {
        width: 225px;
        margin: 0 auto;
        padding-top: 10px;
        font-size: 20px;
        padding-bottom: 20px;
    }
    .jq-code-img {
        background: red;
        height: 55px;
        padding: 0 5px;
        background: url('../../assets/images/sanzijing_bg.jpg');
        background-size: 11px 11px;
        display: box;
        display: -webkit-box;
        box-align: center;
        -webkit-box-align: center;
        box-pack: center;
        -webkit-box-pack: center;
    }
    .jq-code-change {
        height: 23px;
        display: box;
        display: -webkit-box;
        box-pack: end;
        -webkit-box-pack: end;
        box-align: center;
        -webkit-box-align: center;
        color: #959595;
        font-size: 12px;
    }
    @-webkit-keyframes text {
        0% {
            transform: translateY(7px);
        }
        35% {
            -webkit-transform: translateY(-7px) rotate(0);
            color: #8cdc37;
        }
        100% {
            transform: translateY(7px);
        }
    }
    .jq-code-text {
        color: #9f9f9f;
        font-weight: bold;
        padding: 0 10px;
        font-size: 28px;
        position: relative;
        -webkit-animation: text 1.5s infinite;
        transform: translateY(7px);
    }
    .jq-code-img .jq-code-text:nth-of-type(2) {
        -webkit-animation-delay: 0.4s;
    }
    .jq-code-img .jq-code-text:nth-of-type(3) {
        -webkit-animation-delay: 0.8s;
    }
    .jq-code-inputs {
        display: box;
        display: -webkit-box;
        box-pack: justify;
        -webkit-box-pack: justify;
    }
    .jq-code-input {
        border: 2px solid #9f9f9f;
        width: 44px;
        height: 44px;
        display: box;
        display: -webkit-box;
        box-align: center;
        -webkit-box-align: center;
        box-pack: center;
        -webkit-box-pack: center;
        font-weight: bold;
        color: $fontColor;
    }
    .jq-code-btn {
        width: 44px;
        height: 44px;
        display: box;
        display: -webkit-box;
        box-align: center;
        -webkit-box-align: center;
        box-pack: center;
        -webkit-box-pack: center;
        background: #9f9f9f;
        line-height: 44px;
        text-align: center;
        i{
            font-size: 30px;
        }
        &:active{
            background: $kvColor;
        }
    }
    .jq-code-ul {
        width: 100%;
        border-width: 1px 0 0 1px;
        border-style: solid;
        border-color: #9f9f9f;
        margin-top: 18px;
    }
    .jq-code-li {
        width: 25%;
        height: 52px;
        line-height: 52px;
        text-align: center;
        border-width: 0 1px 1px 0;
        border-style: solid;
        border-color: #9f9f9f;
        float: left;
        color: $fontColor;
        font-weight: bold;
        &:active{
            color: #fff;
            background: $kvColor
        }
    }
}
</style>
